<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width: 800px;">
        <div class="container">
            <div style="height: 15px"></div>
            <div class="card">
                <div class="flex" style="justify-content: space-between;">
                    <div class="card_li flex">
                        <p>学生姓名：</p>
                        <p>{{ queryData.studentName }}</p>
                    </div>
                    <div class="card_li flex">
                        <p>毕业学校：</p>
                        <p>{{ queryData.schoolName }}</p>
                    </div>
                </div>
                <div class="flex" style="justify-content: space-between;">
                    <div class="card_li flex">
                        <p>联系电话1：</p>
                        <p v-if="queryData.mobile1" class="pNum">{{ queryData.mobile1 }}</p>
                        <p v-else style="color: #BBC1CF;">无</p>
                    </div>
                    <div class="card_li flex">
                        <p>联系电话2：</p>
                        <p v-if="queryData.mobile2" class="pNum">{{ queryData.mobile2 }}</p>
                        <p v-else style="color: #BBC1CF;">无</p>
                    </div>
                </div>
                <div class="flex" style="justify-content: space-between;">
                    <div class="card_li flex">
                        <p>身份证号：</p>
                        <p class="pNum">{{ queryData.idCard }}</p>
                    </div>
                    <div class="card_li flex">
                        <p>考生号：</p>
                        <p class="pNum">{{ queryData.ksh }}</p>
                    </div>
                </div>
                <div class="flex" style="justify-content: space-between;">
                    <div class="card_li flex">
                        <p>查分密码：</p>
                        <p class="pNum">{{ queryData.cfmm }}</p>
                    </div>
                </div>
            </div>
            <!-- 
            <div class="card">

                <div class="card_li flex">
                    <p>查分密码：</p>
                    <p class="pNum">{{ queryData.cfmm }}</p>
                </div>
            </div> -->

            <div class="card" style="padding-bottom: 0;">
                <div class="card_li1 flex" style="justify-content: flex-start;">
                    <p>选科类型：</p>
                    <p style="color: #000520;">{{ queryData.courseType }}</p>
                </div>
                <div class="score_box flex">
                    <div class="score flex" v-if="queryData.course1">
                        <p>语文</p>
                        <p class="pNum">{{ queryData.course1 }}</p>
                    </div>
                    <div class="score flex" v-if="queryData.course2">
                        <p>数学</p>
                        <p class="pNum">{{ queryData.course2 }}</p>
                    </div>
                    <div class="score flex" v-if="queryData.course3">
                        <p>英语</p>
                        <p class="pNum">{{ queryData.course3 }}</p>
                    </div>
                    <div class="score flex" v-if="queryData.course4">
                        <p>物理</p>
                        <p class="pNum">{{ queryData.course4 }}</p>
                    </div>
                    <div class="score flex" v-if="queryData.course5">
                        <p>化学</p>
                        <p class="pNum">{{ queryData.course5 }}</p>
                    </div>
                    <div class="score flex" v-if="queryData.course6">
                        <p>生物</p>
                        <p class="pNum">{{ queryData.course6 }}</p>
                    </div>
                    <div class="score flex" v-if="queryData.course7">
                        <p>历史</p>
                        <p class="pNum">{{ queryData.course7 }}</p>
                    </div>
                    <div class="score flex" v-if="queryData.course8">
                        <p>地理</p>
                        <p class="pNum">{{ queryData.course8 }}</p>
                    </div>
                    <div class="score flex" v-if="queryData.course9">
                        <p>政治</p>
                        <p class="pNum">{{ queryData.course9 }}</p>
                    </div>
                </div>
                <div class="flex" style="justify-content: space-between;">
                    <div class="card_li flex">
                        <p>实际分数：</p>
                        <p class="pNum">{{ queryData.total }}</p>
                    </div>
                    <div class="card_li1 flex" style="margin: 0 20px;">
                        <p>审核分数：</p>
                        <p v-if="queryData.realScore" class="pNum">
                            <span class="scoreStatus" v-if="queryData.realScore == queryData.total">分数正确</span>
                            <span class="scoreStatus1" v-if="queryData.realScore != queryData.total">分数错误</span>
                            {{ queryData.realScore }}
                        </p>
                        <p v-else style="color: #BBC1CF;">无</p>
                    </div>
                    <div class="card_li1 flex">
                        <p>收费标准：</p>
                        <p class="pNum">￥ {{ queryData.paidInAmount }}</p>
                        <!-- v-if="queryData.paidInAmount" -->
                        <!-- <input v-else type="text" placeholder="请填写收费金额" v-model="form.paidInAmount"> -->
                    </div>
                </div>
            </div>

            <div class="card flex" style="padding-bottom: 0;">
                <div class="card_li1 flex" style="justify-content: flex-start;">
                    <p>校区：</p>
                    <!-- <p class="pNum">￥ {{ queryData.paidInAmount }}</p> -->
                    <el-radio-group v-model="queryData.campus" @change="changeCampus">
                        <el-radio :value="1">校本部</el-radio>
                        <el-radio :value="2">东校区</el-radio>
                    </el-radio-group>
                </div>
                <div class="card_li1 flex">
                    <p>班级：</p>
                    <el-select v-model="queryData.classId" placeholder="请选择班级" style="width: 240px">
                        <el-option v-for="item in classList" :key="item.value" :label="item.classId"
                            :value="item.classId" />
                    </el-select>
                </div>
            </div>
            <div class="card" style="padding-bottom: 20px;">
                <div class="top flex">
                    <div class="xian"></div>
                    <p>操作</p>
                </div>
                <div class="flex radio_box">
                    <div class="name_box flex" style="margin-right: 15px;">
                        <input v-model="queryData.status" type="radio" id="status1" name="status" :value="2"
                            class="radio1">
                        <label for="status1">审核通过</label>
                    </div>
                    <div class="name_box flex" style="margin-right: 15px;">
                        <input v-model="queryData.status" type="radio" id="status2" name="status" :value="4"
                            class="radio1">
                        <label for="status2">拒绝录取</label>
                    </div>
                    <div class="name_box flex" style="margin-right: 15px;">
                        <input v-model="queryData.status" type="radio" id="status3" name="status" :value="5"
                            class="radio1">
                        <label for="status3">信息错误</label>
                    </div>
                    <div class="name_box flex" style="margin-right: 15px;">
                        <input v-model="queryData.status" type="radio" id="status3" name="status" :value="1"
                            class="radio1">
                        <label for="status3">尚未审核</label>
                    </div>
                </div>
            </div>
            <!-- <button class="btn" @click="editHandke">提交</button> -->
            <div style="height: 15px;"></div>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()" v-if="queryData.payStatus != '03'">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { getGradeIds } from "@/utils/dateFormat";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";


export default {
    name: "AddPbArticle",
    components: { ElForm, ElMessage, },
    mounted() {
        this.approveForm.gradeId = getGradeIds()[0]
        console.log('年级', this.approveForm.gradeId);
    },
    watch: {

    },
    data() {
        return {
            dialogWidth: "80%",
            dialogTop: '0',
            dialogBottom: '0',
            dialogFormVisible: false,
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            contentValue: "",
            gradeIds: [],
            approveForm: {
                title: "",
                classId: "",
                gradeId: "",
                campus: "",
            },
            // 校验规则
            addPbArticlerules: {
                title: vxRule(true, null, "blur"),
            },
            queryData: {},
            classList: [],
        };
    },
    methods: {
        getClassList() {
            const gradeId = getGradeIds()[0]
            httpService(
                "/javaApi/baseClassInfo/listByTeacher", {
                campus: this.queryData.campus ? this.queryData.campus : "",
                gradeId: gradeId,
            }, "get"
            ).then((data) => {
                if (data) {
                    this.classList = data
                }
            })
        },
        changeCampus(value) {
            console.log(this.approveForm.campus);
            this.getClassList()
        },
        onClick(e) {
            this.$emit("onClick", e, tinymce);
        },
        closeDialog() {
            // this.clear();
            this.dialogFormVisible = false;
        },
        cancel() {
            this.dialogFormVisible = false;
            this.$parent.getReviewStudentList();
        },
        getQueryById(id) {
            httpService(
                "/javaApi/reviewStudentForm/queryById", { id: id }, "get"
            ).then((data) => {
                this.queryData = data

                if (this.queryData.status == 1) {
                    if (this.queryData.scoreStatus != '密码错误' && this.queryData.scoreStatus != "考生信息不存在" && this.queryData.scoreStatus != '选科错误' && this.queryData.scoreStatus != "分数不准确") {
                        if (this.queryData.total > 449) {
                            this.queryData.status = 2
                        } else {
                            this.queryData.status = 4
                        }
                    } else {
                        this.queryData.status = 5
                    }
                } else if (this.queryData.status == 3) {
                    this.queryData.status == 2
                }
            });
        },
        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.queryData = {}
            this.classList = []
        },
        callParentMethod() {
            this.$emit('call-parent-method');
        },
        save() {
            if (this.queryData.status != 2 && this.queryData.status != 4 && this.queryData.status != 5 && this.queryData.status != 1) {
                ElMessage.warning("未选择审批状态")
                return
            }
            let params = new FormData()
            if (this.queryData.status == 1) {
                params.append("reset", 1)
            }
            if (this.queryData.status == 2) {
                // params.append("scoreStatus", 1)
                params.append("paidInAmount", this.queryData.paidInAmount)
            }
            const gradeId = getGradeIds()[0]

            params.append("id", this.queryData.id)
            params.append("status", this.queryData.status)
            params.append("total", this.queryData.total)
            params.append("courseType", this.queryData.courseType)
            params.append("campus", this.queryData.campus ? this.queryData.campus : "")
            params.append("gradeId", gradeId)
            params.append("classId", this.queryData.classId ? this.queryData.classId : "")
            httpService(
                "/javaApi/reviewStudentForm/edit", params, "post"
            ).then((data) => {
                if (data.code == 200) {
                    ElMessage.success("审核成功");
                    this.clear()
                    this.$parent.getReviewStudentList();
                } else {
                    ElMessage.error("审核失败，请重试！");
                }
            });
        },
    },
};
</script>
<style score>
* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'MyCustomFont';
    /* 自定义字体名称 */
    src: url('../../assets/font/PFDinTextArabic-Medium.ttf') format('woff2');
    /* 其他格式 */
    font-weight: normal;
    font-style: normal;
}

.pNum {
    font-family: 'MyCustomFont', sans-serif;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    background-size: 100%;
    min-height: 100%;
    padding: 0 15px;
    background-color: #F4F4F4;
}

.card {
    padding: 0 15px 10px;
    /* height: 200px; */
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
}

.card_li {
    width: 45%;
    line-height: 50px;
    border-bottom: 1px solid #F2F2F2;
    font-size: 16px;
    box-sizing: border-box;
    justify-content: space-between;
}

.card_li1 {
    width: 45%;
    line-height: 50px;
    font-size: 16px;
    box-sizing: border-box;
    justify-content: space-between;
}


.score_box {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 5px;
}

.score {
    background-color: #F2F7FC;
    justify-content: space-between;
    height: 34px;
    border-radius: 3px;
    padding: 0 15px 0 10px;
}

.score p:first-child {
    font-size: 13px;
    color: #576476;
}

.score p:last-child {
    font-size: 14px;
    color: #05183B;
    font-family: 'MyCustomFont', sans-serif;
}

.xian {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: linear-gradient(to bottom, #007CDA, #1D9BFB);
    margin: 0 5px 0 -10px;
}

.top {
    padding-top: 20px;
}

.top p {
    color: #05183B;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
}

.radio_box {
    justify-content: space-between;
}

.name_box {
    margin-top: 20px;
}

.radio_box label {
    font-size: 14px;
    color: #05183B;
    margin-left: 5px;
}

.btn {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    background-color: #1D9BFB;
    font-size: 17px;
    color: #fff;
    border: none;
    margin-top: 5px;
}

input[type="radio"] {
    width: 18px;
    height: 18px;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
    line-height: 18px;
    position: relative;
    border-radius: 50%;
    outline: none;
    -webkit-appearance: none;
    -webkit-tab-highlight-color: rgba(0, 0, 0, 0);
    color: #fff;
    background: #fff;
    border: 1px solid #C7C7C7;
}

input[type="radio"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    background: #fff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    color: #fff;
}

input[type="radio"]:checked::before {
    content: "";
    content: "\2713";
    background-color: #1D9BFB;
    position: absolute;
    top: -1px;
    left: -1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* border: 1px solid #1D9BFB; */
}

.scoreStatus {
    color: #2CBE66;
    font-size: 14px;
}

.scoreStatus1 {
    color: #F60000;
    font-size: 14px;
}

/* input[type="text"] {
    flex: 1;
    height: 40px;
    border: none;
    outline: none;
    font-size: 16px;
    text-align: end;
} */
</style>